import { useMemo, useState } from "react";

// 计算斐波那契数
function fib(n) {
  console.log("计算函数执行了");
  if (n <= 1) {
    return n;
  }
  return fib(n - 1) + fib(n - 2);
}

export default function UseMemo() {
  const [count, setCount] = useState(0);
  const [num, setNum] = useState(0);
  console.log("组件重新渲染了");

  const result = useMemo(() => {
    return fib(count); //返回计算得到的结果
  }, [count]);

  return (
    <div>
      <p>
        作用：在组件每次重新渲染的时候
        <em style={{ color: "red" }}>缓存计算结果</em>
        <br />
        <br />
        <em style={{color:"#256"}}>一般遇到消耗非常大的计算才有可能用这个API进行缓存</em>
      </p>
      <br />
      <br />
      <p>计算结果：{result}（查看控制台）</p>
      <button onClick={() => setCount(count + 1)}>change count:{count}</button>
      {/* 下面这个跟那个计算斐波那契函数无关，但也会执行 */}
      <button onClick={() => setNum(num + 1)}>change num:{num}</button>
    </div>
  );
}
